<template>
  <div class="picgroup-container">
    <el-row class="picgroup-title">
      <el-col :span="4">
        <el-button type="primary" class="picgroup-title-add" size="mini" @click="add">新 增</el-button>
      </el-col>
      <el-col :span="20">
        <el-input v-model="groupName" placeholder="请输入搜索内容" size="mini" style="width:200px;height:30px;float: right;"></el-input>
        <el-button icon="el-icon-search" @click="searchGroup" circle class="search-button"></el-button>
      </el-col>
    </el-row>
    <div>
      <el-table :data="picGroup" stripe style="width:100%;">
        <el-table-column align="center" label="分组名称">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.id !== editId">{{ scope.row.name }}</div>
              <div v-if="scope.row.id === editId">
                <el-input v-model="scope.row.name" placeholder="请输入名称" size="mini" style="width:100px;text-align: center;"></el-input>
                <el-button class="action-button" type="text"><i class="el-icon-check" @click="submit(scope.row)"/></el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="启用" align="center" width="100px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" @change="submit(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="100px">
          <template slot-scope="scope">
            <div>{{ scope.row.format_create_time | formatTime }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" type="text" @click="eidt(scope.row.id)"><i class="el-icon-edit"/></el-button>
            <el-button class="action-button" 
              @click="isDel = true; pic = scope.row" type="text" v-if="scope.row.id !== addPic.id">
              <svg-icon icon-class="shanchu"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="isDel" width="200px" :modal="false" :show-close="false" center>
      <p>确定要删除该分组吗？</p>
      <div slot="footer">
        <el-button size="mini" type="primary" @click="isDel = false">取消</el-button>
        <el-button size="mini" type="text"    @click="del(pic)">确定</el-button> 
      </div>
    </el-dialog>
  </div>
</template>

<script>
import picMixin from '../mixin/picture'//混入
import { parseTime } from '@/utils/index'
import { addPictureGroup, upPictureGroup, delPictureGroup, getPictureGroup } from '@/api/picture'

export default {
  name: 'PicGroup',
  mixins: [picMixin],
  data() {
    return {
      editId: 0,
      isEdit: false,
      isDel: false,
      addPic: { 
        id: Math.ceil(Math.random()*10), 
        format_create_time: parseTime(new Date()), 
        status: true, 
        name: '' },
      pic: {},
      groupName: ''
    }
  },
  methods: {
    eidt(id) {
      if(this.editId === id && this.addPic.id !== id){
        this.editId = 0;
        this.isEdit = false;
      }else if(this.editId == this.addPic.id){
        this.picGroup.splice(this.picGroup.findIndex(item => item.id === this.editId))
        this.editId = 0;
        this.isEdit = false;
      }
      else{
        this.editId = id;
        this.isEdit = true;
      }
      
    },
    add(){
      if(this.isEdit){
        this.$message.error('当前有分组正在编辑，请提交后再添加')
      }else{
        this.picGroup.push(this.addPic);
        this.editId = this.addPic.id;
        this.isEdit = true;
      }
    },
    /**
     * 提交新增或修改的分组信息
     */
    submit(data){
      if(this.addPic.id === this.editId){//添加
        if(data.name.trim() === '' || data.name === undefined){
          this.$message.error('分组名称不可为空');
          return;
        }
        const params = { 
          name: data.name,
          status: data.status ? '1' : '0', 
          key: this.$store.state.app.activeApp.saa_key 
        };
        addPictureGroup(params).then(response => {
          if(response.status === 200){
            this.$message.success('添加成功');
            this.getPicGroup();
            this.editId = 0;
            this.isEdit = false;
          }else{
            this.$message.error(response.message);
            this.editId = 0;
            this.isEdit = false;
          }
        })
      }else{//修改
        var params;
        if(this.isEdit){
          if(data.name.trim() === '' || data.name === undefined){
            this.$message.error('分组名称不可为空');
            return;
          }
          params = {
            id: data.id,
            name: data.name,
            key: this.$store.state.app.activeApp.saa_key
          }
        }else{
          params = {
            id: data.id,
            status: data.status ? '1' : '0',
            key: this.$store.state.app.activeApp.saa_key
          }
        }
        upPictureGroup(params).then(response => {
          if(response.status === 200){
            this.$message.success('修改成功');
            this.getPicGroup();
            this.editId = 0;
            this.isEdit = false;
          }else{
            this.$message.error(response.message);
            this.editId = 0;
            this.isEdit = false;
          }
        })
      }
    },
    /**
     * 删除分组
     */
    del(data){
      this.isDel = false;
      const params = {
        id: data.id,
        key: this.$store.state.app.activeApp.saa_key
      };
      delPictureGroup(params).then(response => {
        if(response.status === 200){
          this.$message.success('删除成功')
          this.getPicGroup();
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 查询分组
     */
    searchGroup () {
      console.log(this.groupName)
      const params = { key: this.$store.state.app.activeApp.saa_key, status: '1', limit: 100, name: this.groupName }
      getPictureGroup(params).then( response => {
        if(response.status === 200){
          this.picGroup = response.data;
          this.picGroup.forEach(element => {
            if(element.status === '1'){
              element.status = true;
            }else{
              element.status = false;
            }
          });
          this.$store.dispatch('picture/PicGroup',this.picGroup)
        }else{
          this.picGroup = []
        this.$store.dispatch('picture/PicGroup',this.picGroup)
          this.$message(response.message);
        }
      } )
    }
  },
  filters: {
    formatTime(value) {
      return parseTime(value,'{y}-{m}-{d}')
    }
  }
}
</script>

<style lang="css" scoped>
.picgroup-container{
  padding: 0 10px;
}
.picgroup-title{
  text-align: initial;
  height: 40px;
  line-height: 40px;
  padding: 5px 0;
}
.picgroup-title-add{
  padding: 8px 30px;
}
.search-button{
  border: none;
  position: relative;
  left: 450px;
  background-color: rgba(255, 255, 255, 0);
}
.action-button{
  padding: 0 5px;
}
</style>